<template>
	<div class="section honorsBg" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
		@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style=" 'height:' +sectionHeight + 'px;' ">

		<el-row :gutter="24" type="flex" class="newsTitleArea">
			<el-col :gutter="24" class="newsTitle">
				<div class="title_cn">{{$t('gttgHonors')}}
				</div>
				<div class="title_en">Honors of Steel Investment Special Steel Enterprise</div>
				<div class="title_flag"></div>
			</el-col>
		</el-row>
		<el-row :gutter="24" type="flex" class="corporateVisionArea">
			<el-col :gutter="24" class="corporateVision">
				<div class="corporateVisionFlag"></div>
				<div class="corporateVisionText">{{$t('corporateVision')}}</div>
				<div class="corporateVisionContent"> {{$t('corporateVisionSlogan')}}</div>
			</el-col>
		</el-row>
		<el-row :gutter="24" type="flex" class="corporateValuesArea">
			<el-col :gutter="24" class="corporateValues">
				<div class="corporateValuesFlag"></div>
				<div class="corporateValuesText">{{$t('coreValues')}}</div>
				<div class="corporateValuesContent">{{$t('coreValuesSlogan')}} </div>
			</el-col>
		
		</el-row>
		<el-row :gutter="24" type="flex" class="corporatePurposeArea">
			<el-col :gutter="24" class="corporatePurpose">
				<div class="corporatePurposeFlag"></div>
				<div class="corporatePurposeText">{{$t('corporatePurpose')}}</div>
				<div class="corporatePurposeContent">{{$t('corporatePurposeSlogan')}} </div>
			</el-col>
		
		</el-row>
		<el-row :gutter="24" type="flex" class="honorsContentArea">
			<div class="swiper-container" ref="honorsContentArea" id="honorsContentArea">
				<div class="swiper-wrapper">
					<div v-for="(item, index) in slides" :key="index" class="swiper-slide" @click="goToHonorsDetail(item.id)">
						<div style="overflow: hidden;padding: 10px;transition: transform 1s ease;">
							<img :src="$request.getImgUrl()+item.coverImage" alt="Slide" class="swiper-lazy animation"
								style="width: 100%;height: 240px; border-radius: 10px;" />
						</div>
					</div>
				</div>
			</div>
			 
		</el-row>
	</div>
</template>

<script>
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		name: 'Honors',
		props: {
			sectionHeight: Number
		},
		components: {},
		created() {
			this.bindEnterpriseHonor().then(data => {
				this.initBannerSwiper();
			});
		},
		mounted() {
			//this.initBannerSwiper();
			// this.getMenuList();
		},
		data() {
			return {
				honorsSwiper: null, // Swiper实例
				slides: []
			}
		},
		methods: {
			/**
			 * 绑定首页-(3)	
			 */
			bindEnterpriseHonor() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getEnterpriseHonor(params).then(res => {
						that.slides = res.data;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			initBannerSwiper() {
				let that = this;
				// that.swiper = new Swiper(that.$refs.honorsContentArea, {
				// 	slidesPerView: 4,
				// 	spaceBetween: 10,
				// 	lazy: {
				// 		loadPrevNext: true,
				// 	},
				// 	navigation: {
				// 		nextEl: '.swiper-button-next',
				// 		prevEl: '.swiper-button-prev',
				// 	},
				// 	autoplay: {
				// 		delay: 2000,
				// 	},
				// });
				// that.swiper.on('slideNextTransitionStart', function() {
				// 	var activeIndex = that.swiper.activeIndex;
				// 	console.log("开始切换" + activeIndex);
				// });

				this.honorsSwiper = new Swiper('.honorsContentArea .swiper-container', {
					slidesPerView: 1,
					spaceBetween: 10,
				 
					autoplay: {
						delay: 2000,
					},
				});
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------开始----------*/
			handleMouseDown(event) {
				this.startY = event.clientY;
				this.deltaY = 0;
				this.isDragging = true;
			},
			handleMouseMove(event) {
				if (this.isDragging) {
					const currentY = event.clientY;
					this.deltaY = currentY - this.startY;
				}
			},
			handleMouseUp() {
				if (Math.abs(this.deltaY) > 30) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
				this.isDragging = false;
			},
			/*-----------------------------处理----鼠标点击后上下滑动--------------------结束----------*/
			/*-----------------------------处理----手指上下滑动--------------------开始----------*/
			handleTouchStart(event) {
				this.startY = event.touches[0].clientY;
				this.deltaY = 0;
			},
			handleTouchMove(event) {
				const currentY = event.touches[0].clientY;
				this.deltaY = currentY - this.startY;
			},
			handleTouchEnd() {
				if (Math.abs(this.deltaY) > 10) {
					if (this.deltaY > 0) {
						this.$emit('scrollUp')
					} else {
						this.$emit('scrollDown')
					}
				}
			},
			//////跳转详情页面
			goToHonorsDetail(id) {
				this.$router.push({
					name: this.$t("corporateHonorInfo"),
					query: {
						id: id,
					}
				});
			},
		},
		beforeDestroy() {

		},
		watch: {

		}
	};
</script>

<style scoped>
	/* 企业实时新闻 */
	.honorsBg {
		width: 100%;
		height: 100%;
		background: url("../../assets/img/bg_home_honors.jpg") no-repeat;
		background-size: cover;
		background-position: center;
		cursor: pointer;
		padding-top: 0px;
		/* background-color: #5887e5; */
	}

	.newsTitleArea {
		width: 97%;
		height: max-content;
		margin-top: 15px;
	}

	.newsTitle {
		display: flex;
		flex-direction: column;
		text-align: center;
		border-bottom: 1px solid #FFF;
		color: #FFF;
		position: relative;
	}

	.title_cn {
		font-size: 18px;
		font-weight: bold;
		padding-left: 10px;
		height: 30px;
		line-height: 30px;
	}

	.title_en {
		font-size: 12px;
		font-style: italic;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
	}

	.title_flag {
		height: 6px;
		width: 100px;
		background-color: #0484D7;
		position: absolute;
		bottom: -3px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.newsDetile {
		justify-content: center;
		text-align: center;
		position: relative;
	}

	.detileBtn {
		height: 30px;
		line-height: 30px;
		width: 80px;
		border-radius: 5px;
		background-color: #0484D7;
		color: #FFF;
		text-align: center;
		font-size: 12px;
		/* margin-top: 10px; */
		position: absolute;
		right: 0px;
		top: 10px;
	}

	/* ------------------------------- */
	.corporateVisionArea,
	.corporateValuesArea,
	.corporatePurposeArea {
		position: relative;
		padding-top: 30px;
		margin-top: 5px;
		display: flex;
		flex-direction: column;
	}

	.corporateVisionFlag,
	.corporateValuesFlag,
	.corporatePurposeFlag {
		height: 30px;
		width: 30px;
		position: absolute;
		/* 居中显示 */
		left: 50%;
		transform: translateX(-50%);
		top: 5px;
	}

	.corporateVisionFlag {
		background: url("../../assets/icons/icon_honors_vision.png") no-repeat;
		background-position: center;
		background-size: 30px 30px;
	}

	.corporateValuesFlag {
		background: url("../../assets/icons/icon_honors_value.png") no-repeat;
		background-position: center;
		background-size: 30px 30px;
	}

	.corporatePurposeFlag {
		background: url("../../assets/icons/icon_honors_purpose.png") no-repeat;
		background-position: center;
		background-size: 30px 30px;
	}

	.corporateVisionText,
	.corporateValuesText,
	.corporatePurposeText {
		text-align: center;
		font-weight: 400;
		font-size: 1em;
		color: #FFF;
		margin: 5px 0px;
	}

	.corporateVisionContent,
	.corporateValuesContent,
	.corporatePurposeContent {
		text-align: center;
		font-weight: 400;
		color: #F4F8FD;
		font-size: 0.8em;
	}

	/* ------------------------------------------------ */
	.honorsContentArea {
		width: 90%;
		height: 260px;
		margin-top: 10px;
	}

	.honorsContentArea .slide-content img {
		height: 200px;
	}

	.honorsContentArea .swiper-button-prev {
		left: -60px;
		z-index: 9999999;
		top: 60%;
	}

	.honorsContentArea .swiper-button-next {
		right: -60px;
		z-index: 9999999;
		top: 60%;
	}

	.honorsContentArea .el-image__inner {
		/* height: 24vh; */
		object-fit: cover;
	}

	.honorsContentArea .swiper {
		position: relative;
		width: 100%;
	}

	.honorsContentArea .swiper-container {
		overflow: hidden;
	}

	.honorsContentArea .swiper-slide {
		width: 25%;
		text-align: center;
	}

	.honorsContentArea img:hover {
		transform: scale(0.98)
	}
</style>
